const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// const TerserWebpackPlugin = require('terser-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
// 注意：thread-loader 只处理耗时构建任务，且存在一定限制
const threadLoader = require('thread-loader');
threadLoader.warmup(
    {
      // 池选项，例如传递给 loader 选项
      // 必须匹配 loader 选项才能启动正确的池
    },
    [
      // 可以是任意模块，例如
      'babel-loader',
    ]
);

module.exports = {
    entry: {
        index: './src/main.js'
    },
    output: {
        filename: '[name]-[contenthash:8].bundle.js',// contenthash:8最常用，用于避免缓存问题
        path: path.join(__dirname, 'dist')
    },
    optimization: {
        splitChunks: {  
            chunks: 'all',
            automaticNameDelimiter: '-'
        }
    },
    devtool: 'eval-cheap-module-source-map',    // 开发模式：cheap-module-eval-source-map，生产模式：none
    plugins: [
        new HtmlWebpackPlugin({
            title: 'index首页',
            inject: true,                       // script是否至于body底部
            template: './public/index.html',
            filename: 'index.html',
            // cache: false,
            chunks: ['index'],                  // 指定加载js文件，默认全部加载
            // showErrors: true,                // 如果 webpack 编译出现错误，webpack会将错误信息包裹在一个 pre 标签内，属性的默认值为 true ，也就是显示错误信息。
        }),
        new VueLoaderPlugin(),                  // vue项目必须使用，用于解析vue文件
        new MiniCssExtractPlugin(),             // 提取样式到css文件
    ],
    module: {
        rules: [
            {// 转换vue文件
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {// 转换js代码，es6+=>es5
                test: /\.js$/,
                exclude: /node_modules/,
                // use: 'babel-loader'
                use: 'thread-loader'             // 耗时操作可食用多线程配置  
            },
            {// css样式文件的加载
                test: /\.css$/,                  // 匹配文件
                use: [                           // use指定使用到的loader
                    // 'vue-style-loader',       // 开发阶段最好用vue-style-loader，支持css热加载
                    MiniCssExtractPlugin.loader, // 将样式存放到单独的css文件中，取代style-loader
                    'css-loader',                // 先执行css-loader，而且是从后往前执行，所以需要放到下面 
                ]
            },
            {// less样式文件的加载
                test: /\.less$/,                  // 匹配文件
                use: [                            // use指定使用到的loader
                    // 'style-loader',            // 将css-loader转换后的结果放到style标签里面
                    MiniCssExtractPlugin.loader,  // 将样式存放到单独的css文件中，取代style-loader
                    'css-loader',                 // 先执行css-loader，而且是从后往前执行，所以需要放到下面 
                    'less-loader'
                ]
            },
            {// 将小于10kb的图片编码成base64
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'url-loader',         // url-loader对file-loader有依赖，需要提前安装
                    options: {
                        name: '[name]-[contenthash:8].[ext]',
                        outputPath: 'images',
                        limit: 10 * 1024,         // 10 KB 对文件大小进行限制，超过就不转换
                        esModule: false           // 新版loader需要配置，否则会产生错误：img src=[object Module]
                    },
                }
            }
        ]
    },
}

